<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%
   String contextPath = request.getContextPath();
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+contextPath+"/";
%>

<!DOCTYPE html>
<html lang="cn">
<head>
    <title>系统登录</title>
    <%--<base href="<%=basePath%>"> --%> <!-- 1.  base的属性href用来控制整个页面其他链接/图片的地址前缀 -->
    <base href="${pageContext.request.contextPath}/"> <%-- 2. 利用EL表单式来获取到路径--%>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <!-- //Meta tag Keywords  相对协议-->
    <link href="//fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap" rel="stylesheet">
    <!--/Style-CSS -->
    <link rel="stylesheet" href="static/css/style.css" type="text/css" media="all" />
    <!--//Style-CSS -->
    <link rel="stylesheet" href="static/css/font-awesome.min.css" type="text/css" media="all">
    <link rel="stylesheet" href="static/css/swiper/swiper-bundle.min.css"/>
    <script type="text/javascript" src="static/js/jQuery1.8.js"></script>

    <script src="static/js/layui/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="static/js/layui/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <link rel="stylesheet" href="static/js/layui/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/layui/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="static/css/layui/themes/default.css" media="all">
    <link rel="stylesheet" href="static/js/layui/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <script type="text/javascript">
      $(function(){
    	  $("#userName,#password").bind("keypress",function(){
    		  $("#msg").fadeOut("slow");
          });
    	  $("#verifyCode").bind("click",function(){
    		  $(this).css({"cursor":"pointer"});
    		  $(this).attr("src","login/verifyCode?n="+new Date())
    	  });

    	  let userName = localStorage.getItem("userName");
    	  let password =localStorage.getItem("password");
    	  $("#userName").val(userName);
    	  $("#password").val(password);
      });

      //定义一个函数
      let myformSubmit = function(){
    	  let type = $("#form1").attr("method");
    	  let _url = $("#form1").attr("action");

    	  localStorage.setItem("userName",$("#userName").val());
    	  localStorage.setItem("password",$("#password").val());

    	  $("#form1").submit();

      };

      layui.use('layer', function(){
          var layer = layui.layer;
        //用户注册弹框
      $('#regist').on("click",function (){
          var index = layer.open({
              title: '用户注册',
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: true,
              area: ['80%', '80%'],
              content: 'login/toRegister'
          });

          $(window).on("resize", function () {
              layer.full(index);
          });
      });
      });


      /***
       * 忘记密码
       */
      layui.use('layer', function(){
          var layer = layui.layer;
          //用户注册弹框
          $('#forget').on("click",function (){
              var index = layer.open({
                  title: '忘记密码',
                  type: 2,
                  shade: 0.2,
                  maxmin: true,
                  shadeClose: true,
                  area: ['60%', '60%'],
                  content: 'login/fogetpassword'
              });

              $(window).on("resize", function () {
                  layer.full(index);
              });
          });
      });
    </script>


    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }


        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper1 {
            position: absolute;
            top: 22%;
            left: 12%;
            z-index: 999;
            /* width: 100%; */
            /* height: 100%; */
            height: 400px;
            width: 600px;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>


    <div class="w3l-signinform">
        <!-- container -->
        <div class="wrapper">

            <div class="swiper swiper1">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="static/images/Comprehensive.png" alt="综合楼"></div>
                        <div class="swiper-slide"><img src="static/images/dianjiaocenter.jpg" alt="电教中心"></div>
                        <div class="swiper-slide"><img src="static/images/libray.jpg" alt="图书馆"></div>
                        <div class="swiper-slide"><img src="static/images/music.jpg" alt="音乐厅"></div>
                        <div class="swiper-slide"><img src="static/images/shiyancenter.jpg" alt="实验中心"></div>
                    </div>
<%--                    指示箭头--%>
<%--                    <div class="swiper-button-next"></div>--%>
<%--                    <div class="swiper-button-prev"></div>--%>
                </div>

                <!-- Swiper JS -->
                <script src="static/css/swiper/js/swiper-bundle.min.js"></script>

                <!-- Initialize Swiper -->
                <script>
                    var swiper = new Swiper(".mySwiper", {
                        navigation: {
                            nextEl: ".swiper-button-next",
                            prevEl: ".swiper-button-prev",
                        },
                        autoplay: {
                            delay: 2500,
                            disableOnInteraction: false,
                        },
                    });
                </script>

            </div>
            <!-- main content -->
            <div class="w3l-form-info">
                <div class="w3_info">
                    <h1>欢迎登录</h1>
                    <p class="sub-para">ZK学院财务管理系统</p>
                    <h2>User login</h2>
<%--                    login/dologin--%>
                    <form action="login/tologin" method="post" id="form1">
                        <div class="input-group">
                            <span><i class="fa fa-user" aria-hidden="true"></i></span>
                            <input type="text" id="userName" placeholder="用户名" name="userName" value="${userName}" required="">
                        </div>
                        <div class="input-group two-groop">
                            <span><i class="fa fa-key" aria-hidden="true"></i></span>
                            <input type="Password" id="password" placeholder="密码" name="password" value="${password}" required="">
                        </div>

                        <div class="input-group three-groop">
                            <span><i class="fa fa-key" aria-hidden="true"></i></span>
                            <input type="text" style="width: auto !important;"  placeholder="验证码" name="verifyCode" required="">
                            <img alt="验证码" id="verifyCode" src="login/verifyCode"/>
                        </div>

                        <div class="form-row bottom">
                            <div class="form-check">
                                <input type="checkbox" id="remenber" name="remenber" value="remenber">
                                <label for="remenber" > 记住我?</label>

                            </div>
                        </div>
                        <button class="btn btn-primary btn-block" onclick="javascript:myformSubmit()">登录</button>
                    </form>

                    <p class="account">
                        <input  type="button" id="forget" class="layui-btn" value=忘记密码 style="position: absolute;left: 1100px"  />
                       <button type="button" id="regist" class="layui-btn" >注册账户</button>
                    </p>
                    <span id="msg" style="color:red;font-size:25px">${msg}</span>
                </div>
            </div>

            <!-- //main content -->
        </div>
        <!-- //container -->
        <!-- footer -->
        <div class="footer">
            <p>&copy; 2021 ZK学院版权所有 <a href="https://www.zit.edu.cn/" target="blank">ZK学院</a></p>
        </div>
        <!-- footer -->
    </div>

</body>

</html>
